<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src='https://unpkg.com/@antv/l7'></script>
    <script src="https://lib.baomitu.com/jquery/2.2.4/jquery.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0
        }

        #map {
            width: 100vw;
            height: 100vh;
        }

        html,
        body {
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div id="map">

    </div>
    <script>
        var { Scene, GaodeMap } = L7;
        const scene = new Scene({
            id: 'map',
            map: new GaodeMap({
                /* dark|light|normal */
                style: 'normal', // 样式URL
                center: [114.40088809833583,
                    30.4663210497187],
                pitch: 50,
                zoom: 8,
                // token: '3851594382e218c49865a4d6a5170b52',
            }),
            logoVisible: false
        });
        /*
        1、侧重地理数据的展示
        2、map是作为场景Scene的一个属性
        Scene场景  使用地图来实现地理数据的可视化
         */
        /* L7
        阿里
        高德 --阿里  国内
        国际 mapbox
         */
        scene.on("loaded", () => {
            $.ajax({
                url: "http://39.103.151.139:8000/gis/wuhan_people"
            }).then(data => {
                const layer = new L7.PolygonLayer();
                /* people>90万 #ff2d51
                >70万 yellow
                <70万 green
                 */
                layer.source(data)
                    .color("people", p => {
                        if (p > 900000) {
                            return "#ff2d51"
                        } else if (p > 700000) {
                            return "yellow"
                        } else {
                            return "green"
                        }
                    })
                    .shape("extrude")
                    .size("people", p => p)
                    .active(true)
                scene.addLayer(layer)


                let popup = null;
                layer.on("mousemove", (evt) => {
                    /* 1、鼠标悬停出现popup弹窗 */
                    let { lngLat, featureId } = evt
                    const { name, people } = evt.feature.properties;
                    popup = new L7.Popup({
                        closeButton: false,
                        // 初始锚点经纬度
                        lngLat,
                        // Popup 标题
                        // Popup 内容
                        html: `<span>所在地区: ${name}</span><br><span>总人数: ${people}</span>`,
                    });
                    scene.addPopup(popup);
                    /* 2、根据人口数不同区域hover显示不同颜色 */
                    if (people >= 1500000) {
                        layer.active({
                            color: "#dc3545"
                        })
                    } else if (people >= 1000000) {
                        layer.active({
                            color: "#ff2d51"
                        })
                    } else if (people >= 800000) {
                        layer.active({
                            color: "#fd7e14"
                        })
                    } else {
                        layer.active({
                            color: '#00B96B'
                        })
                    }

                })
                /* 3、离开图层popup消失 */
                layer.on("mouseout", () => {
                    if (popup) {
                        popup.remove()

                    }
                })
            })
        })
        /* hover上popup根据人口数的不同显示不同颜色 */
    </script>
</body>

</html>